<template>
  <div>
    <van-overlay :show="true"></van-overlay>
    <van-popup v-model="popup_show" position="bottom" z-index="3" :overlay="false">
      <van-grid :column-num="3" :border="false" gutter="5px">
        <van-grid-item class="edit-grid-item" v-for="(edititem,index) in edititems" :key="index">
          <div class="van-grid-item__mycontent" @click="toEdit(edititem)">
            <div class="iconstyle" :style="edititem.background">
              <van-icon
                class="van-grid-item__icon"
                class-prefix="iconfont icon"
                :name="edititem.icon"
              ></van-icon>
            </div>
            <span class="van-grid-item__text">{{edititem.title}}</span>
          </div>
        </van-grid-item>
      </van-grid>
    </van-popup>
  </div>
</template>

<script>
export default {
  data() {
    return {
      popup_show: true,
      edititems: [
        {
          icon: "Edit",
          title: "文章",
          name: "artical",
          background: {
            background: "#008FFFB2",
          },
        },
        {
          icon: "Edit",
          title: "提问",
          name: "question",
          background: {
            background: "#EF8700CC",
          },
        },
        {
          icon: "Edit",
          title: "说说",
          name: "idea",
          background: {
            background: "#D7DF00B2",
          },
        },
        {
          icon: "Edit",
          title: "二手物品",
          name: "goods",
          background: {
            background: "#4CCE01B2",
          },
        },
        {
          icon: "Edit",
          title: "失物招领",
          name: "lostandfound",
          background: {
            background: "#04B373A5",
          },
        },
      ],
    };
  },
  methods: {
    toEdit(edititem) {
      this.$router.push("/edit/" + edititem.name);
    },
    clickoverlay() {},
  },
};
</script>

<style scoped>
.van-popup {
  padding-bottom: 50px;
  padding-top: 30px;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
}

.van-grid-item__mycontent {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  flex-direction: column;
  box-sizing: border-box;
  height: 100%;
  padding: 5px 8px;
}
.iconstyle {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  flex-direction: column;
  box-sizing: border-box;
  padding: 5px;
  justify-content: center;
  border-radius: 27.5px;
  width: 55px;
  height: 55px;
  color: white;
}
</style>
<style>
.edit-grid-item > .van-grid-item__content {
  padding: 0;
}
</style>